<!doctype html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>

  <title><%= content_for?(:title) ? yield(:title) : "Lark" %></title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

  <%= csrf_meta_tags %>

  <%= stylesheet_link_tag "rediscss/regisindex" %>

  <%= javascript_include_tag "registjs/jquery-1.10.2.min.js" %>
  <%= javascript_include_tag "registjs/jquery.form" %>

</head>

<body>
<!--header-->

<div class="header">
  <div class="hbox">
    <%= image_tag("img01.png") %>
  </div>
</div>

<!--内容-->
<div class="zz">
  <div class="nav">
    <div class="na01">
      <div class="na0101">1、基本信息</div>
    </div>
    <div class="na02">
      <div class="na0201">2、邮箱激活</div>
    </div>
    <div class="na03">
      <div class="na0301">3、信息登记</div>
    </div>
    <div class="na04">
      <div class="na0401">4、审核</div>
    </div>
  </div>
  <%= form_for(@user, url:{action: "create"},:class=>"bl-form bl-formhor") do  |f| %>
      <!--左侧-->
      <div class="mm">
        <div class="mm01"><span style=" color:#f61f1f;">！</span>每个手机号只能申请一个账号，"<em>&nbsp;*&nbsp;&nbsp;</em>" 为必填项</div>
        <div class="mm02">
          <div class="mm0201"><em>*&nbsp;</em>手 机 号 ：</div>
          <input type="text" value="" name="user[mobile]" id="user_mobile" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />
        </div>

        <div class="mm04">
          <div class="mm0401" id="smscode"><em>*&nbsp;</em>验  证 码&nbsp;：</div>
          <input type="text" value="" name="1" class="mm0402" placeholder="必填"/>
          <div class="mm0403">
            <input type="button" id="sendsms" value="免费获取验证码" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </div>
        <div class="mm05">
          <div class="mm0201"><em>*&nbsp;</em>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码 ：</div>
          <input class="fn-tinput" type="password" name="user[password]" value="" placeholder="新密码" required id="password" minlength="6" data-msg-minlength="至少输入6个字符">
        </div>
        <div class="mm06">
          <div class="mm0601"><em>*&nbsp;</em>确认密码：</div>
          <input class="fn-tinput" type="password"  name="user[password_confirmation]" value="" placeholder="确认新密码" required equalTo="#password">
        </div>
        <div class="mm07">
          <div class="mm0201"><em>*&nbsp;</em>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱 ：</div>
          <input type="email" value="" name="user[email]" class="fn-tinput" placeholder="请输入email地址" required data-rule-email="true" data-msg-required="请输入email地址" data-msg-email="请输入正确的email地址" />
        </div>
      </div>

      <div class="nn">
        <div class="nn01" >
          <a href="<%= new_user_session_path %>"> 以有账号？<span style="color:#20c8ff;">直接登录</span></a>
        </div>

        <div class="nnxy">
         <p style=" border: 1px solid gainsboro;width: 380px; height: 460px"></p>
          <div class="nn02">
            <input class="nn0201" value="" name="user[agree]" id="user_agree" type="checkbox">我同意并准守该协议
          </div>
          <div class="nn03">
            <%= f.submit "注册",:id=>"nn03bt",:disabled=>"disabled"%>
          </div>

        </div>
      </div>
  <% end %>
</div>

<!--footer-->
<div class="footer">
  <div class="ftbox">
    <div class="ft01">
      <a href="">关于我们</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">服务协议</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">运营规范</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">辟谣中心</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">客服中心</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">联系邮箱</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft01">
      <a href="">侵权投诉</a>
      <%= image_tag("img06.png") %>
    </div>
    <div class="ft02">
      <a>Copyright<span style="font-family:'Arial';">&copy;</span>2015-2020  @#. All  Rights  Reserved.</a>
    </div>
  </div>
</div>
</body>
</html>

<script>
   $("#user_agree").click(function(){
            if($("#user_agree").is(':checked')){
                $("#nn03bt").removeAttr("disabled");
                $('#nn03bt').css("cursor", "pointer");
            }else{
                $('#nn03bt').attr('disabled',"true")
                $("#nn03bt").removeAttr("style");
            }
        });

   $("#sendsms").click(function(){
       var count = 60;
       var countdown = setInterval(CountDown, 1000);
       var usermobile=$("#user_mobile").value();
       if (usermobile==''){
           $("#user_mobile").append("<span for='user_mobile' class='error'>请输入手机号</span>");
       }else{  function CountDown() {
           $("#sendsms").attr("disabled", true);
           $("#sendsms").val("重新获取 " + count + " 秒!");
           if (count == 0) {
               $("#sendsms").val("获取验证码").removeAttr("disabled");
               clearInterval(countdown);
               var x = 99999;
               var y = 0;
               var rand = parseInt(Math.random() * (x - y + 1) + y);
               $.ajax({
                   type: "post",
                   url: "http://www.nit.cn:4000/api/v1/user/verifycode",
                   data: {mobile:$("#user_mobile").val(),code:rand},
                   dataType: "json",
                   success:function(date){
                       if($(".mm0402").val() == rand.toString){
                           console.info($(".mm0402").val);
                       }else{
                           alert(rand);
                       }
                   }
               });
           }
           count--;
       }

       }
   });

   $(function(){
       $("#new_user").validate({
           submitHandler: function() {
               form.submit();
           }
       })

   })
   $.validator.setDefaults({
       errorElement:'span'
   });

   //配置通用的默认提示语
   $.extend($.validator.messages, {
       required: '必填',
       equalTo: "请再次输入相同的值"
   });
   //手机验证规则
   jQuery.validator.addMethod("mobile", function (value, element) {
       var mobile = /^1[3|4|5|7|8]\d{9}$/;
       return this.optional(element) || (mobile.test(value));
   }, "手机格式不对");
   //验证当前值和目标val的值相等 相等返回为 false
   jQuery.validator.addMethod("equalTo2",function(value, element){
       var returnVal = true;
       var id = $(element).attr("data-rule-equalto2");
       var targetVal = $(id).val();
       if(value === targetVal){
           returnVal = false;
       }
       return returnVal;
   },"不能和原始密码相同");
   
</script>
